ET420197682US 



Docket No. AUS920010987US1 1 Atty. Ref. No. IBM-1051 

System and Method for Navigating Graphical Images 

BACKGROUND OF THE INVENTION 

1. Technical Field 

The present invention relates in general to a system 
5 and method for navigating through graphical images. More 
particularly,, the present invention relates to a system and 
method for scrolling through thumbnail images while 
maintaining a view of a larger master image. 

2. Description of the Related Art 

10 Graphical navigation is increasing in popularity due 

to increased Internet connection speeds and increased 
processing ability of personal computers. Users retrieve 
many types of graphical images for viewing from the 
Internet, such and digital images and video clips and store 
15 them on personal computers. 



3 



Q A business web page or a user's personal file may 

JLj include many graphical images. Thumbnail images are used 

H in navigation applications in order to display many images 

concurrently. Thumbnail is a term used by graphic 

20 designers and photographers for a small image 
representation of a larger image, usually intended to make 
it easier and faster to look at or manage a group of larger 
images. For example, software that provides management of 
a multiple images often provides a miniaturized version of 
25 each image for use as a thumbnail. 

Web sites with many pictures, such as online stores 
with visual catalogs, often provide thumbnail images 
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instead of larger images to make the page download faster. 
The user controls which images to view in full size. A 
user can view the thumbnails and decide to download and 
display a larger image of any of the thumbnails by 
5 selecting the desired thumbnail image (s). 

Thumbnails may also be a cropped to show interesting 
portion of a larger image, rather than simply reducing the 
entire image. Depending upon the subject matter and size of 
the thumbnail, cropping an image to show an interesting 
10 portion may be an effective sales tool. 

A challenge found with existing navigation 
applications is that navigation applications do not retain 
P the view of the non-selected thumbnail images when the 

Q larger, selected image is displayed. Navigation 

>n 15 applications may cover up the non-selected thumbnail images 
W with a new window that includes a larger image of the 

1" selected thumbnail image. Or, navigation applications may 

\* display a larger image of the selected thumbnail image 

□ using the same navigation window in which case the user 

JO 20 selects the "Back" button on the navigation application to 
|1 return to the non-selected thumbnails. What is needed, 

therefore, is a way to view a larger selected thumbnail 
image while effectively retaining the view of the non- 
selected thumbnail images. 



25 
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SUMMARY 

It has been discovered that a screen display is 
effectively managed by having scrollable thumbnail images 
in one section of a display window and a larger, non- 
5 overlapping master image in different section of the same 
display window. 

A user loads an initial display that includes a 
thumbnail table matrix and a larger, master image. The 
thumbnail table matrix shows many thumbnail images. The 
10 user may select different matrix sizes, such as a three by 
U three matrix or a three by four matrix. An appropriate 

O size of the thumbnail table matrix may depend on the size 

JSj of the monitor and the resolution capability. 

\Q When a user selects a thumbnail image to view, a 

15 corresponding larger view of the image is displayed in the 
larger master image. If the thumbnail image is a cropped 
section of the complete image, the complete image will 
appear in the master image area. 

The thumbnail table matrix has corresponding "Next" 
20 and "Back" buttons. The "Next" and "Back" buttons allow 
the user to scroll through thumbnail images while 
maintaining the view of the master image. The "Next" and 
M Back" buttons may be configured either in a horizontal 
mode or a vertical mode. In horizontal mode, selecting the 
25 "Next" button scrolls the thumbnails to the left and new 
thumbnails appear on the right column. The "Back" button 
scrolls the thumbnails to the right and new thumbnails 
appear on the left column. In vertical mode, selecting the 
"Next" button scrolls the thumbnails up and new thumbnails 
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appear on the bottom row. The "Back" button scrolls the 
thumbnails down and new thumbnails appear on the top row. 

The user has various configuration settings. The user 
may change the resolution of the thumbnail images or master 
image. For example, the user may have an older monitor and 
high-resolution thumbnails and master image may take up too 
much display area. The user may also configure the system 
for "auto" mode and allow the system to determine the most 
appropriate resolution and thumbnail table matrix size. 

In one embodiment, this invention may be used for 
video conferencing. In this embodiment, the thumbnails 
include a live video feed of each person attending the 
video conference, and the master image may be the person 
who is speaking or a feed selected by the user. In 
addition, as different individuals speak, the master image 
may change to display the corresponding video feed. 

In another embodiment, this invention is used for 
viewing a training video. In this embodiment, each 

thumbnail includes a representation of a certain topic. 
The user selects the thumbnail topic of interest and the 
video topic selected is displayed in the master image. 
When the user is finished with the first topic, the user 
may select a different topic by selecting a new thumbnail 
instead of scanning through the entire training video. 

The foregoing is a summary and thus contains, by 
necessity, simplifications, generalizations, and omissions 
of detail; consequently, those skilled in the art will 
appreciate that the summary is illustrative only and is not 
intended to be in any way limiting. Other aspects, 
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inventive features, and advantages of the present 
invention, as defined solely by the claims, will become 
apparent in the non-limiting detailed description set forth 
below. 
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BRIEF DESCRIPTION OF THE DRAWINGS 

The present invention may be better understood, and 

its numerous objects, features, and advantages made 

apparent to those skilled in the art by referencing the 

accompanying drawings. The use of the same reference 

symbols in different drawings indicates similar or 
identical items. 

Figure 1 is a diagram of a client accessing graphical 
images from a server; 

Figures 2A, B, and C are changing displays of 
thumbnails and master images during button selections; 

Figure 3 is a high-level flowchart showing display 
changes from user selections; 

Figure 4 is a flowchart showing configurations 
changing; 

Figure 5 is a flowchart showing images shifting in 
response to the "next" and "back" button selections; 

Figure 6 is an example of a configuration change 
window; and 

Figure 7 is a block diagram of an information handling 
system capable of implementing the present invention. 
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DETAILED DESCRIPTION 

The following is intended to provide a detailed 
description of an example of the invention and should not 
be taken to be limiting of the invention itself. Rather, 
any number of variations may fall within the scope of the 
invention which is defined in the claims following the 
description. 

Figure 1 is a diagram of a client accessing graphical 
images from a server. Client 100 accesses image store 150 
information from server 140 through computer network 120. 
Computer network 120 may be any network, such as the 
Internet, that allows computers to communicate with one 
another. Image store 150 may be a non-volatile storage 
area, such as a computer hard drive, and may include data 
such as images, video clips, or other multimedia 
information . 

Client 100 loads thumbnail images and sends user 
change request 110 to computer network 120. User change 
request 110 may be a request to retrieve more images or may 
be a request to change configurations. Computer network 
120 sends change request 130 to server 140 for processing. 
Server 140 retrieves the data, such as image files, 
corresponding to the request from image store 150 and sends 
server change response 160 to computer network 120. 
Computer network sends change response 170 to client 100 
for processing. 

Client 100 may initially access data information from 
image store 150 and store the data on an internal local 
storage area. In another embodiment, client 100 may have 
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data loaded directly on a local storage area. In this 
embodiment, client 100 may access its' internal storage 
area for new thumbnail images and configuration changes. 

Figures 2A, B, and C are changing displays of 
5 thumbnails and master images during button selections. 
Figure 2A shows a display that includes master image 210, 
thumbnails 200, "back" button 215, "next" button 220, and 
configuration change button 290. Master image 210 shows a 
larger version of thumbnail 1 230, Any thumbnail in 
10 thumbnails 200 may be selected to display a larger version 
of the corresponding thumbnail in master image 210. For 
example, if a user selects thumbnail 4 235, a larger 
version of thumbnail 4 235 is displayed in master image 
210. 



; 15 The user selects "back" button 215 or "next" button 

220 to change displayed thumbnail images. The current 
configuration of Figure 2A allows the user to scroll left 
or right to view different thumbnail images. In another 
embodiment, back button 215 and next button 220 may be used 
20 to scroll vertically up and down to view different 
thumbnail images. Configuration change button 290 allows 
the user to enter a configuration menu to change scroll 
modes among other configuration changes (see Figure 6 for 
an example configuration change screen) . 

25 Figure 2B shows a resulting display when a user 

selects "next" button 220 from Figure 2A. The rows in 
thumbnails 240 are shifted left. The first row is removed 
and a new row is displayed on the right. Master image 250 
is not changed since the user has not selected a new 
30 thumbnail. 
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Figure 2C shows a resulting display when a user 
selects thumbnail 9 245 from Figure 2B. Master image 250 
is refreshed and a larger version of thumbnail 9 245 is 
displayed in master image 260, Figures 2A, 2B, and 2C 

5 display a three by three matrix of thumbnails. In another 
embodiment, the matrix may be a different configuration, 
such as a three by four matrix. 

Figure 3 is a high-level flowchart showing display 
changes from user selections. Processing commences at 300 
10 whereupon images are retrieved from image store 315 and 
displayed on display 320 (step 310) . Image store 315 may 
be a local non-volatile storage area, such as a computer 
hard drive, or may be a remote storage location in server 
accessible through a computer network. 



15 A user makes a selection at step 330 and a 



determination is made as to whether the selection is to 
change the configuration of the display (decision 340) . 
If the user requested a configuration change, decision 340 
l~ branches to "Yes" branch 342 whereupon the configuration 

Q 20 change is processed (pre-defined process block 345, see 
Figure 4 for further details) . On the other hand, if the 
selection is not a configuration change, decision 340 
branches to "No" branch 348. 

A determination is made as to whether the user 
25 selected the "Next" or "Back" button (See buttons 215 and 
220 in Figure 2 for an example) to scroll thumbnail images 
(decision 350) . If the user selected the Next or Back 
button, decision 350 branches to "Yes" branch 352 whereupon 
the Next or Back button selection is processed (pre-defined 
30 process block 355, see Figure 5 for further details) . On 
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the other hand, if the Next or Back button is not selected, 
decision 350 branches to "No" branch 358 whereupon the 
image corresponding to the selected thumbnail image is 
retrieved (step 360) . The retrieved image is displayed in 
5 master image 375 at step 370. 

A determination is made as to whether processing 
continues (decision 380) . If processing continues, 

decision 380 branches to "Yes" branch 382 which loops back 
to process the next user selection. This looping continues 
10 until processing terminates, at which point decision 380 
branches to "No" branch 388. The display window is closed 
at step 390, and processing ends at 395. 

Figure 4 is a flowchart showing configuration changes 
(See Figure 6 for an example configuration change screen) . 

15 Configuration change processing commences at 400, whereupon 
a determination is made as to whether the user wants to 
change the thumbtable size (decision 410) . For example, 
the user may want to change the thumbtable size from a 
three by three matrix to a three by four matrix in order to 

20 view more thumbnails at once. If the user wants to change 
the thumbtable size, decision 410 branches to "Yes" branch 
412 and the thumbtable size is updated per the user 
selection (step 415) and processing returns at 460 

On the other hand, if the user does select the 
25 thumbtable size, decision 410 branches to "No" branch 418 
whereupon a decision is made as to whether the user wants 
to change the resolution of the thumbnails (decision 420) . 
For example, the user may have a monitor with lower 
resolution and thus may wish to have lower resolution 
30 thumbnails displayed whereas a user using a high resolution 
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monitor may wish to increase the thumbnail resolution in 
order to see more thumbnail detail. 

If the user wants to change the thumbnail size, 
decision 420 branches to "Yes" branch 422 whereupon the 

5 thumbnail size is changed per the user selection (step 425) 
and processing returns at 460. On the other hand, if the 
user does not select the thumbnail size, decision 420 
branches to "No" branch 428 whereupon a determination is 
made as to whether the user wants to change the resolution 

10 of the master image (decision 430) . Using the example 
above, the user may have a low resolution monitor and the 
master image may be taking up too much screen area. 
Decreasing the master image resolution may free up room for 
other items, such as a larger thumbtable matrix size. 

15 if the user wants to change the resolution of the 

master image, decision 430 branches to "Yes" branch 432 
whereupon the master image resolution is changed per the 
user's request (step 435) and processing returns at 460. 
On the other hand, if the user does not want to change the 

20 master image resolution, decision 430 branches to "No" 
branch and a determination is made as to whether the user 
wants to change the scrolling method (decision 440) . The 
user may want to have the thumbnails scroll from top to 
bottom (vertically) instead of from left to right 

25 (horizontally) when the Back and Next buttons are selected. 

If the user wants to change the scrolling method, 
decision 440 branches to "Yes" branch 442 whereupon the 
scrolling method is changed corresponding to the user's 
selection (step 445) and processing returns at 460. On the 
30 other hand, if the user does not want to change the 
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scrolling method, decision 440 branches to "No" branch 448 
whereupon a determination is made as to whether the user 
wants to manually change configuration settings or have 
processing determine the most appropriate configuration 
5 settings based on system resources and automatically 
configure the display (decision 450) . 

If the user wants to change the auto/manual selection, 
decision 450 branches to "Yes" branch 452 whereupon the 
auto/manual mode is changed corresponding to the user 
10 selection and processing returns at 460. On the other 
hand, if the user does not want to change the auto/manual 
mode, decision 450 branches to "No" branch 458 and 
?~= processing returns at 460. 

Fj Figure 5 is a flowchart showing images shifting in 

t; 15 response to the "next" and "back" button selections. 

fjj Image shift processing commences at 500, whereupon a 

determination is made as to whether the system is m 

|* horizontal scrolling mode or vertical scrolling mode 

(decision 510) . If horizontal scrolling mode is 

||1 20 configured, decision 510 branches to "Yes" branch 518 and 
the Next/Back button selections are processed in a 
horizontal scrolling method. On the other hand, if 
vertical scrolling is configured, decision 510 branches to 
"No" branch 512 and the Next/Back button selections are 
25 processed in a vertical scrolling method. 

If vertical scrolling is configured, a determination 
is made as to whether the Next button or Back button is 
selected (decision 520) . If the next button is selected, 
decision 520 branches to "Yes" branch 528 whereupon a 
30 determination is made as to whether the end of the 
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thumbnail images are already displayed. If the end of the 
thumbnail images are already displayed, decision 540 
branches to "Yes" branch 542 and the thumbnails are not 
shifted and processing returns at 580. On the other hand, 
5 if the end of thumbnails are not already displayed, 
decision 540 branches to "No" branch 544 and the displayed 
thumbnails are shifted one row up (step 545) . For example, 
the bottom row moves to the second to bottom row, and newly 
displayed thumbnails encompass the bottom row and 
10 processing returns at 580. 

If vertical scrolling is configured and the Back 
button is selected, decision 520 branches to "No" branch 
522 and a determination is made as to whether the beginning 
of the thumbnails are already displayed (decision 530) . If 

15 the beginning of the thumbnails are already displayed, 
decision 530 branches to "Yes" branch 532 and the 
thumbnails are not shifted and processing returns at 580. 
On the other hand, if the beginning of the thumbnails are 
not already displayed, decision 530 branches to "No" branch 

20 534 whereupon the displayed thumbnails are shifted one row 
down (step 535) . For example, the top row moves to the 
second to top row, and new thumbnails encompass the top row 
and processing returns at 580. 

If horizontal scrolling is configured, a determination 
25 is made as to whether the Next button or Back button is 
selected at decision 550. If the next button is selected, 
decision 550 branches to "Yes" branch 558 whereupon a 
determination is made as to whether the end of the 
thumbnail images are already displayed. If the end of the 
30 thumbnail images are already displayed, decision 570 
branches to "Yes" branch 572 and the thumbnails are not 
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shifted and processing returns at 580. On the other hand, 
if the end of thumbnails are not already displayed, 
decision 570 branches to "No" branch 574 and the displayed 
thumbnails are shifted one column left (step 575) . For 
5 example, the right column moves to the second to right 
column, and newly displayed thumbnails encompass the right 
column and processing returns at 580. 

If horizontal scrolling is configured and the Back 
button is selected, decision 550 branches to "No" branch 
10 552 and a determination is made as to whether the beginning 
of the thumbnails are already displayed (decision 560) . If 
the beginning of the thumbnails are already displayed, 
decision 560 branches to "Yes" branch 562 and the 
thumbnails are not shifted and processing returns at 580. 
15 On the other hand, if the beginning of the thumbnails are 
not already displayed, decision 560 branches to "No" branch 
564 whereupon the displayed thumbnails are shifted one 
column right (step 565) . For example, the left column 
moves to the second to left column, and new displayed 
20 thumbnails encompass the left column. 



Figure 6 shows a configuration change window. 
Configuration change window 600 includes selections for a 
user to configure a navigation screen. The user may change 
the thumbtable matrix size by entering a matrix size 
25 configuration in text box 605 and text box 610. For 
example, the user may have a large, high resolution monitor 
and may enter an "8" in text box 605 and text box 610 to 
display an eight by eight thumbtable matrix. 

A user may change the resolution of the thumbnails by 
30 entering the pixel resolution in text box 615 and text box 



Docket No. AUS920010987US1 15 



Atty.Ref.No. IBM- 1051 



620. The user may also change the resolution of the master 
image by entering the pixel resolution in text box 625 and 
text box 630. The user may decide to change the resolution 
of the thumbnails and the master image depending upon the 
size and resolution of his monitor. 

Horizontal or vertical scroll mode may be chosen. 
Selecting radio button 635 chooses horizontal scroll mode 
which enables the thumbtable matrix to scroll left and 
right when the "Back" and "Next" buttons are selected. 
Selecting radio button 640 chooses vertical scroll mode 
which enables the thumbtable matrix to scroll up and down 
when the "Back" and "Next" buttons are selected. 

The user may decide to have the computer system 
determine the most appropriate configuration by selecting 
radio button 645. Selecting radio button 645 configures 
the computer system to automatically configure the thumb 
table size, the thumbnail resolution, and the master image 
resolution. The user may still have the ability to select 
scroll mode in automatic configuration. 

After configuration selection, the user selects 
command button 655 to apply the selected changes and close 
configuration change window 600. The user may select 
command button 660 to cancel his configuration changes and 
close configuration change window 600. If the user needs 
help with the contents of configuration change window 600, 
the user selects command button 665 to access a 
configuration change help menu. 

Figure 7 illustrates information handling system 701 
which is a simplified example of a computer system capable 
of performing the server and client operations described 
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herein. Computer system 701 includes processor 700 which 
is coupled to host bus 705. A level two (L2) cache memory 
710 is also coupled to the host bus 705. Host-to-PCI 
bridge 715 is coupled to main memory 720, includes cache 
5 memory and main memory control functions, and provides bus 
control to handle transfers among PCI bus 725, processor 
700, L2 cache 710, main memory 720, and host bus 705. PCI 
bus 725 provides an interface for a variety of devices 
including, for example, LAN card 730. PCI-to-ISA bridge 
10 735 provides bus control to handle transfers between PCI 
bus 725 and ISA bus 740, universal serial bus (USB) 
functionality 745, IDE device functionality 750, power 
jl management functionality 755, and can include other 

Q functional elements not shown, such as a real-time clock 

% i 15 (RTC) , DMA control, interrupt support, and system 

»0 management bus support. Peripheral devices and 

ft 5 

jl input/output (I/O) devices can be attached to various 

s interfaces 760 (e.g., parallel interface 762, serial 

JH interface 764, infrared (IR) interface 766, keyboard 

p 20 interface 768, mouse interface 770, and fixed disk (HDD) 

*LJ 772) coupled to ISA bus 740. Alternatively, many I/O 

!» devices can be accommodated by a super I/O controller (not 
shown) attached to ISA bus 740. 



BIOS 780 is coupled to ISA bus 740, and incorporates 
25 the necessary processor executable code for a variety of 
low-level system functions and system boot functions. BIOS 
780 can be stored in any computer readable medium, 
including magnetic storage media, optical storage media, 
flash memory, random access memory, read only memory, and 
30 communications media conveying signals encoding the 
instructions (e.g., signals from a network). In order to 
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attach computer system 701 to another computer system to 
copy files over a network, LAN card 730 is coupled to PCI 
bus 725 and to PCI-to-ISA bridge 735. Similarly, to 
connect computer system 701 to an ISP to connect to the 
5 Internet using a telephone line connection, modem 775 is 
connected to serial port 764 and PCI-to-ISA Bridge 735. 

While the computer system described in Figure 7 is 
capable of executing the invention described herein, this 
computer system is simply one example of a computer system. 
10 Those skilled in the art will appreciate that many other 
computer system designs are capable of performing the 
invention described herein. 



One of the preferred implementations of the invention 
% % is an application, namely, a set of instructions (program 

\U 15 code) in a code module which may, for example, be resident 
in the random access memory of the computer. Until 
required by the computer, the set of instructions may be 
stored in another computer memory, for example, on a hard 
disk drive, or in removable storage such as an optical disk 
20 (for eventual use in a CD ROM) or floppy disk (for eventual 
use in a floppy disk drive) , or downloaded via the Internet 
or other computer network. Thus, the present invention may 
be implemented as a computer program product for use in a 
computer. In addition, although the various methods 
25 described are conveniently implemented in a general purpose 
computer selectively activated or reconfigured by software, 
one of ordinary skill in the art would also recognize that 
such methods may be carried out in hardware, in firmware, 
or in more specialized apparatus constructed to perform the 
30 required method steps. 
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While particular embodiments of the present invention 
have been shown and described, it will be obvious to those 
skilled in the art that, based upon the teachings herein, 
changes and modifications may be made without departing 
from this invention and its broader aspects and, therefore, 
the appended claims are to encompass within their scope all 
such changes and modifications as are within the true 
spirit and scope of this invention. Furthermore, it is to 
be understood that the invention is solely defined by the 
appended claims. It will be understood by those with skill 
in the art that if a specific number of an introduced claim 
element is intended, such intent will be explicitly recited 
in the claim, and in the absence of such recitation no such 
limitation is present. For a non-limiting example, as an 
aid to understanding, the following appended claims contain 
usage of the introductory phrases "at least one" and "one 
or more" to introduce claim elements. However, the use of 
such phrases should not be construed to imply that the 
introduction of a claim element by the indefinite articles 
"a" or "an" limits any particular claim containing such 
introduced claim element to inventions containing only one 
such element, even when the same claim includes the 
introductory phrases "one or more" or "at least one" and 
indefinite articles such as "a" or "an"; the same holds 
true for the use in the claims of definite articles. 



